<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>插件</title>
    <script src="../vue.global.js"></script>
</head>
<body>
<div id="app"></div>
<script>
    /**
     * 插件：也是将通用性的功能封装起来
     */
    const myPlugin = {
        install(app,options){
            app.provide('name','yuanpengyue')
            app.directive('focus',{
                mounted(el){
                    el.focus();
                }
            });
            app.mixin({
                mounted(){
                    console.log('mixin')
                }
            });
            app.config.globalProperties.$sayHello = 'hello world'
        }
    }
    const app = Vue.createApp({
        data() {
            return {

            }
        },
        methods: {},
        template: `
          <my-title/>
        `
    });
    app.component('my-title',{
        inject:['name'],
        template: `
        <div>{{name}}</div>
        <input v-focus />
        `,
        mounted(){
            console.log(this.$sayHello)
        }
    });
    app.use(myPlugin)
    const vm = app.mount("#app");
</script>
</body>
</html>